Pinia 在 HBuilderX 项目中的集成
Pinia 是 Vue 3 官方推荐的状态管理库，HBuilderX 创建的项目内置了 Pinia 支持，只需要在入口文件中注册即可。但 CLI 创建的项目需要根据 HBuilderX 版本选择不同的安装方式。
版本差异
| 项目类型 | HBuilderX 版本 | 安装方式 |
|---|---|---|
| HBuilderX 项目 | 任意 | 内置，无需安装 |
| CLI 项目 | 4.14+ | pnpm add pinia（最新版） |
| CLI 项目 | 4.14 之前 | 需指定特定版本号安装 |
HBuilderX 项目配置
在 main.js 中注册 Pinia：
// main.js
import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
const pinia = createPinia()
app.use(pinia)
return { app }
}
javascript
创建一个简单的 Store：
// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++
}
}
})
javascript
在页面组件中使用：
<template>
<view>
<button @click="handleClick">Click</button>
<text>{{ count }}</text>
</view>
</template>
<script>
import { useCounterStore } from '@/stores/counter'
export default {
computed: {
count() {
const counter = useCounterStore()
return counter.count
}
},
methods: {
handleClick() {
const counter = useCounterStore()
counter.increment()
console.log('count:', counter.count)
}
}
}
</script>
vue
小程序中调试 Pinia 状态
Vue DevTools 在小程序端无法直接展示 Store 的状态变化。当需要观察 state 变更和 action 触发时，需要利用 Pinia 的插件机制自行编写调试代码。
监听 State 变化（$subscribe）
在 main.js 中，通过 Pinia 插件订阅所有 Store 的 state 变更：
const pinia = createPinia()
pinia.use(({ store }) => {
// 订阅 state 变化
store.$subscribe((mutation, state) => {
console.log(`[Pinia State] storeId: ${mutation.storeId}`)
console.log(`[Pinia State] type: ${mutation.type}`)
console.log('[Pinia State] state:', state)
})
})
app.use(pinia)
javascript
当页面触发 state 修改（如点击按钮调用 increment），控制台会输出：
[Pinia State] storeId: counter
[Pinia State] type: direct
[Pinia State] state: { count: 1 }
text
监听 Action 执行（$onAction）
同样在 Pinia 插件中，可以订阅 action 的执行过程，包括参数、返回值和异常：
pinia.use(({ store }) => {
store.$onAction(({ name, args, after, onError }) => {
// action 开始执行
console.log(`[Pinia Action] ${name} 开始执行`)
console.log(`[Pinia Action] 参数:`, args)
// action 成功返回
after((result) => {
console.log(`[Pinia Action] ${name} 执行成功`)
console.log(`[Pinia Action] 返回值:`, result)
})
// action 抛出异常
onError((error) => {
console.error(`[Pinia Action] ${name} 执行失败:`, error)
})
})
})
javascript
实际运行时控制台输出示例：
[Pinia Action] increment 开始执行
[Pinia Action] 参数: []
[Pinia Action] increment 执行成功
[Pinia Action] 返回值: undefined
text
CLI 项目中的配置差异
CLI 项目中集成的核心逻辑与 HBuilderX 项目完全相同——同样是创建 Pinia 实例、注册插件、订阅 mutation 和 action。唯一的区别在于 Pinia 的安装方式：高版本 HBuilderX（4.14+）直接安装最新版即可，低版本需指定特定版本号。
调试代码可以统一写在 main.js 的 Pinia 插件中，通过条件判断在开发环境启用：
if (process.env.NODE_ENV === 'development') {
pinia.use(({ store }) => {
store.$subscribe((mutation, state) => {
console.log(`[Pinia Debug] ${mutation.storeId}:`, state)
})
})
}
javascript
这样在生产环境中不会产生额外的调试输出，避免性能损耗。
↑